<!DOCTYPE html>
<html>
<head>
    <html lang="ch">
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>淘方案</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.1.0/css/bootstrap.min.css">
</head>

<body>
    
     <!-- 导航栏 -->
     <nav class="navbar navbar-expand-sm bg-dark fixed-top " >

            <!-- 左侧导航栏 用来摆放Logo-->
            <ul class="navbar-nav  " style="padding-left: 50px">
                <li class="nav-item">
                    <a class="btn nav-link" href="../index.html"><span class="text-white" ><strong>淘方案</strong></span></a>   
                </li>
            </ul>
    
            <!-- 中间导航栏  用来放置发现,消息,搜索框-->
            <div class="collapse navbar-collapse " style="padding-left: 75px">
                <ul class="navbar-nav ">
                    <li class="nav-item">
                        <a class=" btn nav-link " href="#"><span class="text-white" >发现</span></a>   
                    </li>
                    <li class="nav-item">
                        
                        <a class="btn nav-link text-white" href="#">消息 <span class="badge badge-danger">4</span></a>
                      
                    </li>
                </ul>
    
                <!-- 搜索框 -->
                <div style="padding-left: 15px"> <input class="form-control" type="text" placeholder="Search"> </div>
                <button class="btn btn-success" type="button">Search</button>
            </div>
            
     
            <!-- 右侧导航栏 用户头像以及下拉框-->
            <div class="collapse navbar-collapse justify-content-end" >
                <ul class="navbar-nav " >
                    <li class="nav-item ">
                        <div class="dropdown" style="width: 150px">
                            <a class="btn text-white dropdown-toggle" data-toggle="dropdown">
                                Koga
                            </a>
                            <div class="dropdown-menu">
                                <a class="dropdown-item text-dark" href="../index.html">我的主页</a>
                                <a class="dropdown-item text-dark" href="../HTML/account.html">账户资料</a>
                                <a class="dropdown-item text-dark" href="../HTML/collect.html">我的收藏</a>
                                <a class="dropdown-item text-dark" href="../HTML/Sign_out.html">注销</a>
                            </div>
                        </div>
                    </li>
                </ul>
            </div>              
    </nav>
    
    <!-- 主体部分 -->
    <div class="container">
        <div class="row"  style="margin-top:130px ">

            <!-- 左侧选项栏 -->
            <div class="col-3 text-center "style="padding-top: 25px;">
                <ul class="nav nav-pills flex-column bg-light" role="tablist">
                    <li class="nav-item ">
                        <a class="nav-link active " data-toggle="tab" href="#base">基础设置</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" data-toggle="tab" href="#person">个人资料</a>
                    </li>
                </ul>
            </div>

            <!-- 内容 -->
            <div class="col-7 ">
                <div class="tab-content">

                    <!-- 基础设置内容 -->
                    <div id="base" class="container tab-pane active"><br>
                        <form>
                            <div class="form-group row">
                                <label for="username" class="col-sm-2 col-form-label">用户名</label>
                                <div class="col-sm-8">
                                <input type="text" class="form-control" id="username" placeholder="username" value="Koga">
                                </div>
                            </div>

                            <div class="form-group row">
                                <label for="Password" class="col-sm-2 col-form-label">Password</label>
                                <div class="col-sm-8">
                                <input type="password" class="form-control" id="Password" placeholder="Password" value="123456789" readonly>
                                </div>
                                <div class="col-sm-2">
                                    <button type="button" class="btn btn-light " data-toggle="modal" data-target="#Cpassword">更改密码</button>
                                </div>
                            </div>

                            <div class="form-group row">
                                <label for="Email" class="col-sm-2 col-form-label">Email</label>
                                <div class="col-sm-8">
                                <input type="email" class="form-control" id="Email" placeholder="Email" value="kogaleung@gmail.com" >
                                </div>
                            </div>
                            
                            <fieldset class="form-group">
                                <div class="row">
                                <legend class="col-form-label col-sm-2 pt-0">语言设置</legend>
                                <div class="col-sm-8">
                                    <div class="form-check">
                                    <input class="form-check-input" type="radio" name="language" id="SC"  checked>
                                    <label class="form-check-label" for="SC">
                                        简体中文
                                    </label>
                                    </div>
                                    <div class="form-check">
                                    <input class="form-check-input" type="radio" name="language" id="TC"    >
                                    <label class="form-check-label" for="TC">
                                        繁体中文
                                    </label>
                                    </div>
                                    <div class="form-check ">
                                    <input class="form-check-input" type="radio" name="language" id="EN"  >
                                    <label class="form-check-label" for="EN">
                                        英文
                                    </label>
                                    </div>
                                </div>
                                </div>
                            </fieldset>

                            <div class="form-group row">
                                <div class="col-sm-8">
                                        <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#Save">保存</button>
                                </div>
                            </div>
                            </form>
                        
                    </div>

                    <!-- 个人资料内容 -->
                    <div id="person" class="container tab-pane fade"><br>
                        <form>

                            <div class="form-group row">
                                <label for="name" class="col-sm-2 col-form-label">姓名</label>
                                <div class="col-sm-8">
                                <input type="text" class="form-control" id="name" placeholder="姓名" value="梁浩佳">
                                </div>
                            </div>

                            <div class="form-group row">
                                <label for="TEL" class="col-sm-2 col-form-label">手机号码</label>
                                <div class="col-sm-8">
                                <input type="tel" class="form-control" id="TEL" placeholder="手机号码" value="15713101888">
                                </div>
                            </div>

                            <fieldset class="form-group">
                                <div class="row">
                                <legend class="col-form-label col-sm-2 pt-0">性别</legend>
                                <div class="col-sm-8">
                                    <div class="form-check">
                                    <input class="form-check-input" type="radio" name="sex" id="male"  checked>
                                    <label class="form-check-label" for="SC">
                                        男
                                    </label>
                                    </div>
                                    <div class="form-check">
                                    <input class="form-check-input" type="radio" name="sex" id="female"    >
                                    <label class="form-check-label" for="TC">
                                       女
                                    </label>
                                    </div>
                                    <div class="form-check ">
                                    <input class="form-check-input" type="radio" name="sex" id="other"  >
                                    <label class="form-check-label" for="EN">
                                        其他
                                    </label>
                                    </div>
                                </div>
                                </div>
                            </fieldset>


                            <div class="form-group row">
                                <label for="presentation" class="col-sm-2 col-form-label">个人介绍</label>
                                <div class="col-sm-8">
                                    <textarea class="form-control" id="presentation" rows="5"  >自我简介 </textarea>
                                </div>
                            </div>
                            <div class="form-group row">
                                <div class="col-sm-8">
                                <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#Save">保存</button>
                                </div>
                            </div>
                        </form>
                    </div>

                </div>
            </div>
            
            <!-- 调整间距 -->
            <div class="col-1"></div>    
        </div>
    </div>


    <!-- 保存模态框 -->
    <div class="modal fade" id="Save">
        <div class="modal-dialog">
             <div class="modal-content">
                <!-- 模态框主体 -->
                <div class="modal-body">
                 保存成功
                 </div>
            </div>
        </div>
    </div>
      

    <!-- 密码模态框 -->
    <div class="modal fade" id="Cpassword">
        <div class="modal-dialog">
            <div class="modal-content">
       
                <!-- 模态框头部 -->
                <div class="modal-header">
                <h4 class="modal-title">更改密码</h4>
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                </div>
        
                <!-- 模态框主体 -->
                <div class="modal-body">
                    <form>
                        <div class="form-group row">
                            
                            <label for="Oldpassword" class="col-sm-2 col-form-label">旧密码</label>
                            <div class="col-sm-8">
                                <input type="text" class="form-control" id="Oldpassword" required>
                            </div>
                        </div>

                        <div class="form-group row">
                                
                            <label for="Nwepassword" class="col-sm-2 col-form-label">新密码</label>
                            <div class="col-sm-8">
                            <input type="password" class="form-control" id="Newpassword"  required>
                            </div>
                        </div>
                    </form>
                </div>

                <!-- 模态框底部 -->
                <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">保存</button>
                </div>
            </div>
        </div>
    </div>
      

    <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/popper.js/1.12.5/umd/popper.min.js"></script>
    <script src="https://cdn.bootcss.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
</body>
</html>